<!--
	1. 常用标签的练习和整理
	2. 常用的CSS样式
	3. 常用的JS功能函数
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<!-- 引入外部 CSS样式 文件  -->	
	<link href="css/xxx.css" type="text/css" rel="stylesheet" />
	
	<!-- 引入外部 JS 文件 -->
	<script src="js/xxx.js" type="text/javascript"></script>
	
	<!-- 常用的 CSS样式 -->
	<style type="text/css">
		/* 1. 全局初始化样式,设置字符集，取消padding和margin */
		@charset "utf-8";
		*{ padding: 0px;margin: 0px; }
		
		/* body的全局样式  */
		body{font-family:"微软雅黑";font-weight: normal;}
		
		/* dbody 居中 */
		.dbody{
			margin-left:auto;
			margin-right: auto;
			width: 960px;
			height: 6000px;
			border: #CCCCCC 1px solid;
			box-shadow: #CCCCCC 5px 5px 5px 5px;
			padding-left: 10px;
		}
		
		
		/* 回到顶部的 div 的样式 
		 * 设置了 position 之后 没有边距 只有 位移
			1. position:fixed
			 ->无论设置fixed属性的标签的父级标签是否设置了定位
			        设置之后释放物理空间，父级标签位 body， 
		 	2. position:absolute
		 	 -> 2.1. 如果父级无定位：超出父级结构相对于 body 
		 	 -> 2.2. 如果父级有定位：不会超出父级结构
		 	3. position:relative
		 	 -> 3.1. 不释放物理空间，只是相对于自身原来的位置设置位移
		*/
		.backTop{ 
			width: 50px;height: 50px;
			border: 1px red solid;
			position: fixed;
			right: 100px ;
			bottom: 10px;
			background-color: #CCCCCC;
			box-shadow: #CCCCCC 3px 3px 3px;	
		}
		
		/* 目录的样式 */
		.mulu{
			width: 190px;
			height: 290px;
			position: fixed;
			background-color: darkcyan;
			border:1px #ccc solid;
			top: 30px;
			right:100px ;
			box-shadow: #CCCCCC 5px 5px 5px;
			padding: 10px;		
		}
		
		/* 2.a 标签的跳转以及样式 ,注意浏览器缓存*/
		/* 未访问的链接样式 */
		.alink a:link{color:black;}
		
		/* 鼠标放上去的样式 */
		.alink a:hover{color:green;text-decoration: underline;}
		
		/* 选定后的样式 */
		.alink a:active{color:orange;}
		
		/* 链接访问后的样式 */
		.alink a:visited{color:red;}
		
		/* 3. 图片翻转特效  */
		.imgfz img:hover{
			/* 旋转 360 度 */
			transform: rotate(360deg);
		}
		.imgfz img{
			/* 顺时针 翻转动作 话费 2S  */
			transition: transform 1s;
		}
		
		h1{
			color: red;
			width: 900px;
			height:50px;
			background-color:burlywood;
			box-shadow: #CCCCCC 3px 3px 3px;
		}
		
		/* 登录的 div */
		.admin{
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.5);
			display: none;
			position: fixed;
			
		}
		.admin .login{
			width: 1000px;
			height: 500px;
			margin-left: auto;
			margin-right: auto;
			position: relative;
		}
		
		/* 关闭 图片 */
		.admin .login #close{
			width: 23px;
			height: 20px;
			top: 10px;
			left: 630px;
			position: absolute;
		}
		
		
		.admin .logPanel{
			width: 230px;
			height: 200px;
			background-color:white;
			padding: 50px;
			border: 1px #CCCCCC solid;
			margin-top: 300px;
			margin-right:auto;
			margin-left: auto;
			box-shadow: #CCCCCC 5px 5px 5px ;
			
		}
		
		.admin form .img2{
			width: 106px;
			height: 25px;
			margin-top: 20px;
			float: left;
		}
		.admin form .font1{
			width: 200px;
			height: 15px;
			text-align:center;
			line-height:14px;
			margin-top:20px;
			margin-right:10px;
			float:left;
		}
		
		
		
	</style>
	
	<!-- 常用你的 JS 函数-->
	<script type="text/javascript">
		
		// 1. 全选checkBox
		var flg = true;//全选标志位
		function checkAll(){
			var checkBox = document.getElementsByName("hobby");
			//全选标志位位true 就全选
			if(flg == true){
				for(var i=0;i<checkBox.length;i++){
					checkBox[i].checked="checked";
					flg = false;
				}
			}else{//否则取消全选
				for(var i=0;i<checkBox.length;i++){
					checkBox[i].checked="";
				}
				flg = true;
			}
		}
		
		
		//2. form 表单取消默认行为
		function onSubmitFun(){
			if(confirm("您准备提交吗？")){
				return true;
			}else{
				return false;
			}
		}
		
		// 3. 点击按钮更换背景颜色
		//更换背景标志位
		var flg = true;
		function btnChBg(){
			var body = document.getElementsByTagName("body");
			if(flg == true){
				body[0].style.backgroundColor="#CCC";
				flg = false;
			}else{
				body[0].style.backgroundColor="#FFF";
				flg = true;
			}
		}
		
		// 4. 下拉列表 select 选择背景颜色
		function selectChBg(bg){
			var body = document.getElementsByTagName("body");
			var op = bg.value;
			switch(op){
				case "grey": 
					body[0].style.backgroundColor="grey";
					break;
				case "yellow":
					body[0].style.backgroundColor="yellow"; 
					break;
				case "green":
					body[0].style.backgroundColor="green";
					break;
				case "white":
				body[0].style.backgroundColor="white";
					break;
				default:break;
			}
		}
		
		// 5. 取消 a 标签默认行为
		function qxaTag(){
			if(confirm("您确定要进入链接网页吗？")){
				return true;
			}else{
				return false;
			}
		}
		
		// 6.  onmouseover 和 onmouseout 事件 触发的函数
		// 在两个 div 下面的 script 里面
		
		
		// 显示登录或者关闭登录的js
		function openLog(){
				var admin = document.getElementById("admin");
				admin.style.display = "inline";
			}
		
		
		function closeLog(){
				var admin = document.getElementById("admin");
				admin.style.display = "none";
		}
		
	</script>
		
		
	</head>
	<body>
	<div class="dbody">
		
		<!-- 漂浮的login面板 -->
	    <div class="admin" id="admin">
	    	<div class="login">
				<img src="../img/close.PNG" id="close"  usemap="#map1" />
				<map name="map1" id="map1">
					<area href="#" coords="15,13,10"  shape="circle" onclick="closeLog();" />
				</map>
			<div class="logPanel">
				<form action="#" method="post">
					登录名:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">手机动态密码登陆
					<img src="../img/list_icon.gif" width="13" height="13"/></a><br>
					<input type="text" name="username" placeholder="手机号/会员名/邮箱" size="30"/><br>
					登录密码：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="aqua"><a href="#">忘记登录密码?</a></font><br>
					<input type="password" name="password"  size="30"/><br>
					<input type="checkbox" name="safeplugin" />安全控件登录<br />
					<input type="submit" value="登录" 
						style="width: 230px; height: 30px;background-color:purple;color:#fff;border: 0px;border-radius: 5px;"/>
					<br />
					<font color="blue" class="font1">
						<a href="#">二维码登录</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html">免费注册</a>
					</font>
				</form>
	    	</div>
	        </div>
	    </div>   
		
		
		<!-- 回到顶部的 div -->
		<div class="backTop"><a href="#top">回到顶部</a></div>
		
		<!-- 目录的 div -->
		<div class="mulu" id="mulu">
			<h3>目录</h3>
			<a href="#html">1.html标签</a><br>
			<a href="#css">2.css样式</a><br>
			<a href="#javascript">3.javascript整理</a><br>
		</div>
		
		<h1>1.HTML常用标签</h1>
		<h2 id="html">1.常用转义标签</h2>
		<pre>
			&amp;:nbsp空格
			&amp;amp:&amp;本身
			&amp;and:^
			&amp;bull;·
			&amp;copy;版权符号
			&amp;lt;<
			&amp;gt;>
			&amp;ldqua;左标点
			&amp;rdqua;右标点
		</pre>
		<!--
			&nbsp;空格
			&amp;&本身
			&and;^
			&bull;·
			&copy;版权符号
			&lt;<
			&gt;>
			&ldqua;左标点
			&rdqua;右标点
		-->
		<p>查看源码在注释里面可见</p>	
		
		<h2 id="top" id="tg02">2. &lt;a&gt; 标签的跳转以及样式</h2>
		<div class="alink">
			<a href="#">a标签</a>
		</div>
		
		<h2>3.&lt;img/&gt;标签的热图链接</h2>
		<img src="../img/sslogo.png" usemap="#map"/>
		<!-- map 热图 -->
		<map name="map" id="map">
			<!-- shap="rect" 矩形  coords:前两个左上角坐标，后两个，右下角坐标-->
			<area shape="rect" coords="0,0,87,45" href="#"/>
			<!-- shap="circle" 圆形 coords:圆心坐标，半径 -->
			<area shape="circle" coords="146,25,25" href="#"/>
		</map>
		
		<h2>4.邮件的链接</h2>
		<a href="mailto:xxx@163.com">邮箱</a>
		
		<h2>5.滚动标签</h2>
		<div style="width: 100px;height: 50px;border: 1px red solid;">
		<marquee scrolldelay="100" direction="right">这是一个滚动标签</marquee>
		</div>
		
		<h2>6. &lt;testarea&gt;设置不可拖动</h2>
		<textarea cols="30" rows="5" style="resize: none;">123123123123</textarea>
		
		<h2>7.表单的特点</h2>
		<!--
        	1. onsubmit="return onSubmitFun()";
        	    通过onsubmit 属性的方法取消默认行为
        	2. input type=text:
        	    size="20":设置控件的初始宽度
        	    maxlength="6":控件中输入的字符最多6个
        	    placeholder="输入名字":提示文字
        	3. input type="reset":
        	    重置表单内容，只有在表单中才有效果
        -->
		<form action="#" onsubmit="return onSubmitFun()">
			type=text:<input type="text" name="username" size="20" maxlength="6" placeholder="输入名字"/><br>
			type=password:<input type="password" name="password"/><br>
			type=radio单选框:
			<!-- 默认选中 -->
			<input type="radio" name="intreste" value="WebDesign" checked="checked"/>Web设计&nbsp;
			<input type="radio" name="intreste" value="WebDev"/>Web开发<br>
			
			type=checkbox多选:
			<input type="checkbox" name="hobby" value="sport" />运动
			<input type="checkbox" name="hobby" value="chat" />聊天
			<input type="checkbox" name="hobby" value="game" />游戏
			<input type="checkbox" name="hobby" value="checkAll" onclick="checkAll();"/>全选<br/>
			type=reset:<input type="reset" name="username" />&nbsp;<input type="submit" value="submit"><br>
		</form>
		
		<h2> 8. 按钮点击更换背景</h2>
		<input type="button" value="点击更换背景" onclick="btnChBg();" /><br>
		
		<h2> 9. 下拉列表更换背景</h2>
		<select onchange="selectChBg(this);">
	    	<option value="white">白色</option>
	    	<option value="yellow">黃色</option>
	    	<option value="grey">灰色</option>
	    	<option value="green">綠色</option>
	    </select>
	    
	    <h2> 10. 取消 a 标签默认行为</h2>
	    <a href="#" onclick="return qxaTag();">取消a标签链接行为</a>
	    
	    <h2> 11. onmouseover 和 onmouseout 事件</h2>
	    <div style="background-color: red;width: 100px;height: 100px;" id="blc">
	    	<p style="color: white;" id="text1">鼠标放在此处</p>
	    </div>
	    <br>
	    <div id="blc2" style="background-color: red;width: 100px;height: 100px;text-align: center;">
	    	
	    </div>
	    <script>
	    	var blc = document.getElementById("blc");
	    	var p = document.getElementById("text1");
	    	blc.onmouseover = function(){
	    		blc.style.width="200px";
	    		p.style.fontSize="20px";
	    		//alert("big!!!");
	    	}
	    	blc.onmouseout = function(){
	    		blc.style.width="100px";
	    		p.style.fontSize="16px";
	    	}
	    	
	    	var blc2 = document.getElementById("blc2");
	    	blc2.onmouseover = function(){
	    		blc2.innerHTML="hello!your mourse is on this area!";
	    		blc2.style.width="200px";
	    		blc2.style.height="200px";
	    		//alert("big!!!");
	    	}
	    	blc2.onmouseout = function(){
	    		blc2.innerHTML="";
	    		blc2.style.width="100px";
	    		blc2.style.height="100px";
	    	}
	    </script>
	    <br>
	    
	    <h1 id="css"> 2. CSS新样式</h1>
	    
	    <h2> 12.1 边框倒角，阴影</h2>
	    <!--
	    	1. 倒角样式：border-radius: 15px;
        	2. 边框阴影：box-shadow: 10px 10px 5px #888888;
        -->
	    <div 
	    	style="width: 100px;
	    	height: 100px;
	    	border: red 1px solid;
	    	border-radius: 15px;
	    	box-shadow: 10px 10px 5px #FFA500;
	    	"></div>
	    	
	    <h2 style="text-shadow:#FF0000 5px 5px 5px;">12.2 文字阴影效果</h2>
	    
	    <h2> 12.2 图片边框</h2>
	    <!-- 
	    	不常用，不用深究！
	    -->
	    <div
	    	style="width: 100px;
	    	height: 100px;
	    	border-image:url(img/sun.jpg) 6 6 6 6 fill norepeat stretch;
	    	"></div>
	    	
	    <h2> 12.3 图片翻转</h2>
	    <div class="imgfz">
	    <img  src="../img/p1.jpg"/>
	    </div>
	    
	    <h2> 12.4 点击按钮显示/隐藏界面</h2>
	    <input type="button" value="显示登录面板" onclick="openLog();"/>
	    <div >
	    	1232132132312
	    </div>


	    <h1 id="javascript"> 3. JavaScript学习</h1>
	    <script type="text/javascript">
	    	
	    	// 1. window.open 函数
	    	function openDv(){
	    		//window.open(参数1,参数2,参数3)
	    		window.open("http://www.google.com","google","height=500,width=800,location=no,menubar=no,toolbar=0,resizable=no");
	    	}
	    	
	    </script>
	    
	    <h2> 1.浏览器对象模型 </h2>
	    <h3> 1.1 window 对象</h3>
	    <b>window常用的属性</b><br>
	    <img src="../img/window-method.PNG" /><br />
	    <b>window常用的方法</b><br>
	    <img src="../img/window-method2.PNG" /><br />
	    <b>window.open()参数</b><br>
	    <img src="../img/window-open.PNG" /><br />
	    <b>window.open(参数1,参数2,参数3)的测试</b><br>
	    <a href="#" onclick="openDv();">windo.open()</a><br>
	    
	    <h2>2. 延时</h2>
	    <h3> 2.1 setTimeout/clearTimeout</h3>
	    <input type="button" onclick="count1(this);" value="开始计时"/>
	    <div id="time1"></div>
	    <h3> 2.1 setInterval/clearInterval</h3>
	    <input type="button" onclick="count2(this);" value="开始计时"/>
	    <div id="time2"></div>
	    
	    <!--  
	    	因为 dom 按照顺序加载，所以当文档还没有加载完成的时候找不到对应的div 
	    -->
	    <script>
	    	// ============ 两种计时方式  =============
	    	
	    	var t1,t2;//接受时间的参数
	    	var flg1 = true,flg2 = true;//标志位
	    	var i=0,n=0;//计时初始值
	    	var div1 = document.getElementById("time1");//得到 div
	    	var div2 = document.getElementById("time2");
	    	
	    	// ============  setTimeout  =============
	    	// 1. setTimeout 计时
	    	function startTimeOut(){
	    		i++;
	    		div1.innerHTML = i;
	    		t1 = setTimeout('startTimeOut()',1000);
	    	}
	    	
	    	// 停止计时
	    	function stopTimeOut(){
	    		clearTimeout(t1);
	    	}
	    	
	    	// setTimeout 按钮的 点击事件
	    	function count1(btn){
	    		// 开始计时
	    		if(flg1 == true){
	    			startTimeOut();
	    			btn.value="停止计时"
	    			flg1 = false;
	    		}else{//停止计时
	    			stopTimeOut();
					btn.value="开始计时"
					flg1 = true;
	    		}
	    	}
	    	
	    	// ============  setInterval  =============
	    	// 3. setInterval 计时
	    	function startInterval(){
	    		n++;
	    		div2.innerHTML = n;
	    	}
	    	
	    	function stopInterval(){
	    		clearInterval(t2);
	    	}
	    	
	    	// setInterval 按钮的 点击事件
	    	function count2(btn){
	    		// 开始计时
	    		if(flg2 == true){
	    			t2 = setInterval("startInterval()",1000);
	    			btn.value="停止计时"
	    			flg2 = false;
	    		}else{//停止计时
	    			stopInterval(t2);
					btn.value="开始计时"
					flg2 = true;
	    		}
	    	}
	    	
	    	// 3. location 对象的函数
	    	function rf(){
	    		alert("location.href:"+location.href);
	    		location.reload();//重新加载页面
	    	}
	    	
	    	
	    	// 4. 更改 document 对象的属性
	    	var flg = true;
	    	function doc(){
	    		if(flg == true){
		    		document.bgColor="burlywood";
		    		document.fgColor="red";
		    		document.title="document改变了";
		    		flg = false;
	    		}else{
	    			document.bgColor="white";
	    			document.fgColor="black";
	    			document.title="document恢复了";
	    			flg = true;
	    		}
	    	}
	    	
	    </script>
	    
	    <h2> 3. history对象</h2>
	    <a href="javascript:window.history.back();">后退</a>&nbsp;&nbsp;&nbsp;<a href="javascript:window.history.forward();">前进</a>
	    
	    <h2> 4. location对象</h2>
	    <input type="button" value="刷新网页" onclick="rf();"/>
	    
	    <h2> 5. document 对象</h2>
	    <input type="button" value="改变document的属性" onclick="doc();"/>
	    
	    <h2> 6. DOM 节点类型</h2>
	    <img src="../img/dom-node.PNG"/><br>
	    <input type="button" value="触发document的函数" onclick="getDoc();"/>
	    <div id="parNode" name="parentnode">
	    	<p>外部段落1</p>
	    	<p>外部段落2</p>
	    	<p>外部段落3</p>
	    	<div id="inNode">
	    		<p>内部段落1</p>
	    		<p>内部段落2</p>
	    		<p>内部段落3</p>
	    	</div>
	    </div>
	    <!-- 
	    	测试 获得 DOM 节点 的 script
	    	1. DOM 属性：
	    	    - nodeName：节点名字
	    	    - nodeType： 节点类型
	    	    - nodeValue：节点值
	    	    - 父节点.ChildNodes:返回所有的子节点组成的数组
	    	2. DOM 方法;
	    		- creatTextNode("文本内容"):创建文本节点
	    		- 父节点.appendChildNode("要增加的新节点"):为指定父元素增加子节点
	    		- 父节点.insertBefore("新节点","要被插入的节点")：插入元素在指定节点之前
	    		- 父节点.removeChild("要删除的节点名"):删除指定的子节点
	    -->
	    <script>
	    	// 触发事件
	    	function getDoc(){
	    		// 1. 得到 根节点
	    		var node = document.getElementById("parNode");
	    		var inNode = document.getElementById("inNode");
	    		alert(node.getAttribute("name")+"\n"+"parentNode的子节点数量:"+node.childNodes.length);
	    		//node.setAttribute("name")="更改后的name";//设置属性
	    		
	    		// 创建一个新的节点
	    		var newNode = document.createElement("p");
	    		newNode.innerHTML="<font color='#FF0000'>this is new node</font>"
	    		node.appendChild(newNode);
	    		node.insertBefore(newNode,inNode);
	    	}
	    	
	    </script>
	    
	    <h2> 7. Object 对象</h2>
	    <p>javascript 的面向对象</p>
	    <input type="button" value="点击我获得对象属性值" onclick="showAttr();"/>
	    
	    <h2> 8. Date 对象</h2>
	    <!--<img src="../img/date.PNG"/><br />-->
	    <pre>
	    	方法：
	    		- getDate():返回一个月中的某一天
	    		- getDay():返回一周中的某一天(0~6),0为周日，1为周一，以此类推
	    		- getFullYear():以四位数返回年份
	    		- getHours():返回小时(0~23)
	    		- getMilliseconds():返回毫秒
	    		- getMinutes():返回分钟
	    		- getMonth():返回月份(0~11),0为一月，1为二月，以此类推
	    		- getSeconds():返回秒数
	    		- getTime():返回1970年1月1日至今的毫秒数
	    </pre>
	    <input type="button" value="点击我显示/隐藏-时间" onclick="showDateTime();"/>
	    
	    <div id="dateArea"></div>
	    
	    <input type="button" value="点击我显示/隐藏-倒计时" onclick="showDjs();"/>
	    
	    <div id="djs"></div>
	    
	    <script>
	       //============创建对象==============
	    	var person = new Object();
	    	person.name = "Bart";
	    	person.age = 15;
	    	function getAttr(attr){
	    		alert("person[attr]:"+person[attr]);
	    	}
	    	
	    	function showAttr(){
	    		// 测试
	    		getAttr("name");
	    		getAttr("age");
	    	}
	    	
	    	//============Date对象==============
	    	/*
	    	 * 方法：
	    		- getDate():返回一个月中的某一天
	    		- getDay():返回一周中的某一天(0~6),0为周日，1为周一，以此类推
	    		- getFullYear():以四位数返回年份
	    		- getHours():返回小时(0~23)
	    		- getMilliseconds():返回毫秒
	    		- getMinutes():返回分钟
	    		- getMonth():返回月份(0~11),0为一月，1为二月，以此类推
	    		- getSeconds():返回秒数
	    		- getTime():返回1970年1月1日至今的毫秒数
	    	*/
	    	var dateArea = document.getElementById("dateArea");
	    	var val;//计时器标志位
	    	function getTime(){
	    		var today = new Date();//获得 date 对象
	    		var year = today.getFullYear();//获得年份
	    		var month = today.getMonth()+1;//获得月份
	    		var day = today.getDay()+1;//获得日
	    		var hour = today.getHours();//获得小时
	    		var minutes = today.getMinutes();//获得分钟
	    		var seconds = today.getSeconds();//获得秒
	    		var lt = today.getTime();//获得1970年1月1日至今的毫秒数
	    		// div 中写入要显示的内容
	    		dateArea.innerHTML=year+"年"+month+"月"+day+"日 "+hour+"时"+minutes+"分"+seconds+"秒<br>1970年1月1日至今的毫秒数："+lt;
	    		
	    	}
	    	
	    	function stopTime(){
	    		clearInterval(val);
	    	}
	    	
	    	var flgTime = true;//点击事件标志位
	    	function showDateTime(){
	    		if(flgTime == true){
	    			flgTime = false;
	    			val = setInterval("getTime()",1000);//最好这样写，如果写在getTime内部会成死循环
	    		}else{
	    			flgTime = true;
	    			stopTime();
	    			dateArea.innerHTML="";
	    		}
	    	}
	    	
	    	/* =========== 圣诞节时间倒计时 =========== */
	    	var djs = document.getElementById("djs");
	    	
	    	/* 显示倒计时时间函数 */
	    	var djstt;
	    	var future = new Date();//创建未来时间的对象
	    	future.setFullYear(2017,11,30);//2017-12-31
	    	//开始显示倒计时函数
	    	function setDjs(){
	    		var now = new Date();//创建现在时间的对象
	    		var ms = future.getTime() - now.getTime(); //获取相差的总毫秒数
	    		//总天数
	    		var day = parseInt(ms/(24*3600*1000));
	    		//余数 表示剩下的ms数
	    		var yms = parseInt(ms%(24*3600*1000));
	    		// 小时
	    		var hour = parseInt(yms/(3600*1000));
	    		// 除了小时之后的剩余 ms 数
	    		var minute = parseInt((parseInt(yms%(3600*1000)))/(60*1000));
	    		var sec = parseInt(((parseInt(yms%(3600*1000)))%(60*1000))/1000);
	    	    djs.innerHTML = day+"天"+hour+"小时"+minute+"分钟"+sec+"秒";
				
	    	}
	    	// 停止显示倒计时函数
	    	function stopDjs(){
	    		clearInterval(djstt);
	    	}
	    	
	    	/* 倒计时 点击事件函数 */
	    	var djsFlg = true;
	    	function showDjs(){
	    		//显示时间
	    		if(djsFlg == true){
	    			djsFlg = false;
	    			djstt = 
	    			
	    			setDjs();
	    		}else{
	    			djsFlg = true;
	    			djs.innerHTML = "";
	    			stopDjs();
	    		}
	    	}
	    	
	    </script>
	    
	    <h2> 9. image 对象</h2>
	    <input type="button" value="点击切换图片" onclick="chPic();" />
	    <img src="../img/p2.jpg" id="pic" />
	    <script>
	    	var picObj = new Image();
	    	picObj.src = "../img/p1.jpg";
	    	var pic = document.getElementById("pic");
	    	function chPic(){
	    		pic.src = picObj.src;
	    	}
	    	
	    	
	    </script>
	    
	    <h2> 10. Math 对象</h2>
	    <pre>
	    	1. Math.abs(number):返回number的绝对值
	    	2. Math.ceil(number):对number向上取整，如Math.cel(67.6)返回值是68
	    	3. Math.floor(number):对number向下取整，如Math.floor(67.6)返回是67
	    	4. Math.max(number1,number2):返回number1和number2中较大的值
	    	5. Math.min(number1,number2):返回最小值
	    	6. Math.pow(x,y):返回x的y次幂
	    	7. Math.random():返回0~1之间的伪随机数，[0,1)
	    	8. Math.round(number):四舍五入
	    	9. Math.sqrt(number):number的平方根
	    </pre>
	    <div class="math">
	    	
	    </div>
	    <h3> 猜数字</h3>
	    <input type="text" id="guessNum" placeholder="输入要猜的数字" />
	    <input type="button" value="验证数字是否正确" onclick="guess();" />
	    <!--
        	猜数字的script
        -->
	    <script>
	    	// 猜数字的 
	    	var randomNum = Math.ceil(Math.random()*10);
	    	function guess(){
	    		var inn = document.getElementById("guessNum").value;//得到输入的值
//	    		var val = parseInt(inn);
	    		// 判断是否是数字
	    		if( !isNaN(inn) && inn.trim()!="" ){//如果是数字并切不为空
	    			if(inn > randomNum){ // 判断 输入的数 和随机数的比较
	    				alert("您输入的数太大了");
	    			}else if(inn < randomNum){
	    				alert("您输入的数太小了");
	    			}else{
	    				alert("恭喜您猜对了！");
	    			}
	    		}else{
	    			alert("您输入的不是数字，请输入数字！")
	    		}
	    	}
	    
	    </script>
	    
	    <h2> 11. String 对象</h2>
	    <pre>
	    	1. 'str'.charAt(3):返回指定索引处的字符串
	    	2. 'str'.indexOf('s'):返回某个字符串在目标字符串中首次出现的位置，如果不存在返回-1
	    	3. 'str'.substr(1,2):返回截取的字符串
	    	4. 'str'.toLowerCase():返回转化成小写的字符串
	    	5. 'str'.toUpperCase():返回转换成大写的字符串
	    	6. 'str'.split(","):返回一个数组，使用","作为分隔符
	    </pre>
	    email:<input type="text" name="email" onchange="checkEmail(this);"/>
	    <script>
	        // 检查邮箱格式
	    	function checkEmail(str){
	    		var val = str.value.trim();//获得input输入的值
	    		if(val == ""){
	    			alert("输入不能为空！")
	    		}else{
	    			if( (val.indexOf("@") == -1) && (val.indexOf(".") == -1)){
	    				alert("邮箱格式不正确！");
	    			}
	    			
	    		}
	    	}
	    </script>
	    
	    <h2> 12. 创建对象&amp;for...in...遍历</h2>
	    <input type="button" onclick="showPerson();" value="点击测试对象的属性和方法"/>
	    <input type="button" onclick="foreach();" value="点击遍历对象的属性"/>
	    <script>
	    	//创建Person对象
	    	function Person(name,age,gender){
	    		this.name = name;
	    		this.age = age;
	    		this.gender = gender;
	    		//定义类的方法
	    		this.showAttr = function(){
	    			alert("name:"+this.name+",age:"+this.age+",gender:"+this.gender);
	    		}
	    	}
	    	
	    	// 测试对象
	    	var person = new Person('Bart',15,'man');
	    		
	    	function showPerson(){
	    		person.showAttr();
	    	}
	    	
	    	var info;
	    	function foreach(){
	    		for( p in person){
	    			info += person[p]+",";
	    		}
				alert(info);
	    	}
	    	
	    </script>
	    
	    <h2> 13. 设置联动-使用数组</h2>
	    <select id="province" onchange="ld(this);">
	    	<option>请选择</option><option value="xa">西安</option><option value="bj">北京</option><option value="sh">上海</option>
	    </select>
	    <select id="city"><option>请选择</option></select>
	    <script>
	    	//取得二级标签的对象
	    	var city = document.getElementById("city");
	    	function ld(pro){
	    		switch(pro.value){
	    			case 'xa' :
	    				city.innerHTML=" ";
	    				city.options.add(new Option("未央区"));
	    				city.options.add(new Option("高新区"));
	    				city.options.add(new Option("莲湖区"));
	    				break;
	    			case 'bj' :
	    				city.innerHTML=" ";
	    				city.options.add(new Option("中关村"));
	    				city.options.add(new Option("天安门"));
	    				city.options.add(new Option("朝阳区"));
	    				break;
	    			case 'sh' :
	    				city.innerHTML=" ";
	    				city.options.add(new Option("南京路"));
	    				city.options.add(new Option("外滩"));
	    				city.options.add(new Option("东方明珠"));
	    				break;
	    			default:
	    				city.innerHTML=" ";
	    				city.options.add(new Option("请选择"));
	    		}
	    	}
	    </script>
	    
	    <h2> 14. JS的正则表达式RegExp</h2>
	    
	    <h3>14.1 构造函数</h3>
	    <pre>
	    	(1).构造函数方式
	    	    var reg = new RegExp("表达式","附加函数");
	    	(2).普通方式
	    	    var reg = /表达式/附加参数
	    	    附加参数是可选的，用来扩展正则表达式的含义，主要有三个参数：
	    	    1. g:全局匹配
	    	    2. i:用作忽略大小写的参数
	    	    3. m:多行匹配
	    </pre>
	    
	    <h3>14.2 test()方法</h3>
	    <pre>
	    	(1).test方法
	    	    //测试一个字符串是否包含是正则表达式对象所指定的正则表达式值，如果是返回true否则返回false
	    	    regExpObject.test(string);
				var str="hello world";
				var regExp=new RegExp("world");
				var result=regExp.test(str);
				document.write(result);  //true
			
			(2).测试忽略大小写
			    var str = "HELLO WORLD";
			    var regExp = /world/i;
			    var result = regExp.test(str);
			    document.write(result);  //true
	    </pre>
	    
	    <h3>14.3 exec()方法</h3>
	    <pre>
	    	- exec方法使用RegExp对象实例创建时指定的正则表达式模式搜索字符串，并返回一个包含搜索结果的数组。
	    	
	    </pre>
	    <input  type="button" value="测试exec()方法" onclick="testexec();"/>
	    <script>
	    	function testexec(){
			var str = "HELLO,WORLD";
//			var regExp = new RegExp("he");//用对象创建
			var regExp = /he/i;//用正则创建
//			alert(regExp.test(str));//true
			alert(regExp.exec(str));//HE
			alert(regExp.exec(str).index);//0
		};
	    </script>
	    
	    <h3>14.4 compile()方法</h3>
	    <pre>
	    compile() 方法用于改变 RegExp。
		compile() 既可以改变检索模式，也可以添加或删除第二个参数。
		例子：
	    var patt1=new RegExp("e");
		document.write(patt1.test("The best things in life are free"));
		patt1.compile("d");
		document.write(patt1.test("The best things in life are free"));
		由于字符串中存在 "e"，而没有 "d"，以上代码的输出是：
		truefalse
	    </pre>
	    
	    <h3>14.5 限定符 {n}</h3>
	    <pre>
	{n}：规定前面的元素或组合项要连续出现n次。
	限定符
	（2）{n}：规定前面的元素或组合项至少出现n次。例如“o{2}”，字符串“bod”不能与之匹配，但“foood”可以与之匹配。
	（3）{n,m}：规定前面的元素或组合项至少连续出现n次，至多连续出现m次，其中n≤m，逗号和数字之间不能有空格。
	        例如“o{1,3}”，字符串“food”和字符串“foood”都能与之匹配。
	（4）+：规定前面的元素或组合项必须出现一次或连续出现多次，等效于{1}。
	（5）*：规定前面的元素或组合项可以出现零次或连续多次，等效于{0}。例如“zo*”，字符串“z”和“zoo”都能与之匹配。
	（6）?：规定前面的元素或组合项出现零次或一次，等效于{0,1}。例如“zo?”,字符串“z”和“zo”都能与之匹配。
	    </pre>
	    
	    <h3>14.6 选择匹配符</h3>
	    <pre>
    	选择匹配符
	选择匹配符有且仅有一个，即“|”字符，用于选择匹配两个选项之中的任意一个。
	例如“chapter|section1”匹配的是“chapter”或“section1”，如果要匹配“chapter1”或“section1”，
	使用括号，即“(chapter|section)1”。

	    </pre>
	    
	    <h3>14.7 字符串匹配</h3>
	    <pre>
	    	字符匹配符
（1）[…]：匹配方括号中包含的字符集中的任意一个字符。例如，正则表达式“[abc]”，字符“a”、“b”、“c”都可以与之匹配。
（2）[^…]：匹配方括号中未包含的任何字符。例如，正则表达式“[^ab]”，除了字符“a”、“b”之外,其他的任何字符都可以与之匹配。
（3）[a-z]，[1-9]：匹配指定范围内的任何字符。
（4）[^a-z]，[^1-9]：匹配不在指定的范围内的任何字符。
（5）\d：匹配任意一个数字字符，等效于[0-9]。
（6）\D：匹配任意一个非数字字符，等效于[^0-9]。
（7）\s：匹配任何空白字符，包括空格、制表符等。
（8）\S：匹配任何非空白字符。
（9）\w：匹配任何英文字母、数字和下划线，等效于[A-Za-z0-9_]。
（10）\W：匹配任何非英文字母和数字类字符，但不包括下划线，等效于[^A-Za-z0-9_]。
（11）.：匹配除换行符\n之外的任何单字符。
	    </pre>
	    
	    <h3>14.8 常用的正则</h3>
	    <pre>
	    	常用的正则表达式
1．邮箱：^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$;
2．中国的邮政编码：^\d{6}$
3．匹配字符串中的中文字符：[\u4e00-\u9fa5]

	    </pre>
	    <h3>14.8 JS编码</h3>
	    <pre>
	    	
	    </pre>
	    <fieldset>
	    	<legend>escape</legend>
	    	<pre>
	简单来说，escape是对字符串(string)进行编码(而另外两种是对URL)，作用是让它们在所有电脑上可读。
	编码之后的效果是%XX或者%uXXXX这种形式。
	其中 ASCII字母、数字、@*/+ ，这几个字符不会被编码，其余的都会。
	最关键的是，当你需要对URL编码时，请忘记这个方法，这个方法是针对字符串使用的，不适用于URL。
	    	</pre>
	    </fieldset>
		    <fieldset>
	    	<legend>encodeURI 和 encodeURIComponent</legend>
	    	<pre>
	对URL编码是常见的事，所以这两个方法应该是实际中要特别注意的。
它们都是编码URL，唯一区别就是编码的字符范围，其中
encodeURI 方法不会对下列字符编码  ASCII字母、数字、~!@#$&amp;*()=:/,;?+'
encodeURIComponent 方法不会对下列字符编码 ASCII字母、数字、~!*()'
所以 encodeURIComponent 比 encodeURI 编码的范围更大。
实际例子来说，encodeURIComponent会把 http://  编码成  http%3A%2F%2F 而encodeURI却不会。
	    	</pre>
	    </fieldset>
	<pre>
		1. 仅仅只是编码字符串使用 <font color="red">escape </font>
		2. 编码整个URL时用<font color="red">encodeURI </font>
		3. 编码整个URL后面的参数<font color="red">encodeURIComponent </font>
	</pre>
	</div>
	</body>
</html>
